/** 
  校际交流学生申请
*/
<template>
    <div>
        <div v-if="ifShowList ==='list'">
            <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
                <h1 class="condition-title">校际交流学生申请列表</h1>
                <div class="sub-title">
                    <div class="float-right" style="display: flex;">
                        <el-button type="danger" @click="delStuApply()">删除</el-button>
                        <el-button type="primary" @click="addApplication()">申请</el-button>
                    </div>
                </div>
                <edu-table
                    :pagination="false"
                    :order="true"
                    :tooltipEffect="tooltipEffect"
                    stripe
                    :data="dataList"
                    size="small"
                    @selection-change="handleSelectionChange"
                >
                    <edu-table-column label="项目名称" prop="projectName" align="center"></edu-table-column>
                    <edu-table-column label="国家/地区" prop="nation" align="center"></edu-table-column>
                    <edu-table-column label="合作大学" prop="partnerCollege" align="center"></edu-table-column>
                    <edu-table-column label="开始时间" prop="startTime" align="center"></edu-table-column>
                    <edu-table-column label="结束时间" prop="endTime" align="center"></edu-table-column>
                    <edu-table-column label="项目级别" prop="projectLevel" align="center">
                        <template slot-scope="scope">
                            <el-tag>{{scope.row.projectLevel | projectLevel}}</el-tag>
                        </template>
                    </edu-table-column>
                    <!-- <edu-table-column label="出访时间" prop="outTime" align="center"></edu-table-column> -->
                    <!-- <edu-table-column label="回国时间" prop="backTime" align="center"></edu-table-column> -->
                    <edu-table-column
                        label="获得对方学位时间"
                        prop="oppositeDegreeTime"
                        min-width="160"
                        align="center"
                    ></edu-table-column>
                    <edu-table-column label="审核状态" prop="approveStatus" align="center">
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.approveStatus !== null"
                                :type="scope.row.approveStatus | getType"
                            >{{scope.row.approveStatus | approveStatus}}</el-tag>
                        </template>
                    </edu-table-column>
                    <edu-table-column
                        label="下一级审批人"
                        prop="approveName"
                        min-width="120"
                        align="center"
                    ></edu-table-column>
                    <edu-table-column label="操作" prop="idCard" min-width="150" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="toDetail(scope.row)">查看</el-button>
                            <el-button
                                type="text"
                                v-show="scope.row.approveStatus === 0 || scope.row.approveStatus === 3"
                                @click="editDetail(scope.row)"
                            >编辑</el-button>
                            <el-button
                                type="text"
                                v-show="scope.row.approveStatus === 1"
                                @click="approveRevoke(scope.row)"
                            >撤销</el-button>
                            <el-button
                                type="text"
                                v-show="scope.row.approveStatus === 0 || scope.row.approveStatus === 3"
                                @click="delStuApply(scope.row)"
                            >删除</el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
            </el-card>
        </div>
        <div v-if="ifShowList ==='add'">
            <stu-Apply @returnVal="changekey" :submitType="submitType" :id="id"></stu-Apply>
        </div>
        <div v-if="ifShowList ==='view'">
            <stu-Apply-View @returnVal="changekey" :id="id" :studentId="studentId"></stu-Apply-View>
        </div>
    </div>
</template>
<script>
import stuApply from './stuApply'
import appListOfIntAcaConApi from 'common/src/api/internationalCommunication/appListOfIntAcaCon'
import stuApplyApi from 'common/src/api/interSchoolExchange/stuApply'
import stuApplyView from './common/stuApplyView'
export default {
    components: {
        'stu-Apply': stuApply,
        'stu-Apply-View': stuApplyView
    },
    data() {
        return {
            dataList: [],
            submitType: ' ',
            ifShowList: 'list',
            multipleSelection: [],
            studentId: ''
        }
    },
    filters: {
        approveStatus(val) {
            switch (val) {
                case 0:
                    return '草稿'
                case 1:
                    return '已提交'
                case 2:
                    return '待审核'
                case 3:
                    return '已驳回'
                case 4:
                    return '不通过'
                case 5:
                    return '已通过'

                default:
                    return ' '
            }
        },
        getType(val) {
            switch (val) {
                case 0:
                    return 'info'
                case 1:
                    return 'info'
                case 2:
                    return 'info'
                case 3:
                    return 'warning'
                case 4:
                    return 'danger'
                case 5:
                    return 'success'
                default:
                    return ''
            }
        },
        projectLevel(val) {
            switch (val) {
                case 1:
                    return '院级'
                case 2:
                    return '校级'
                default:
                    return ''
            }
        }
    },
    created() {
        this.getListData()
    },

    methods: {
        changekey(val) {
            this.ifShowList = val
            this.getListData()
        },
        // 获取列表页
        getListData() {
            this.multipleSelection = []
            this.dataList = []
            let parm = {
                pageNum_: 1,
                pageSize_: 999,
                condition: {
                    studentId: ''
                }
            }
            stuApplyApi.listApply(parm).then(res => {
                if (res.code === 200) {
                    res.data.forEach(appList => {
                        this.dataList.push(appList)
                    })
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = []
            val.forEach(app => {
                this.multipleSelection.push({ id: app.id, approveStatus: app.approveStatus })
            })
        },

        // 申请撤销
        approveRevoke(row) {
            let parm = {
                actNo: row.actNo
            }

            this.$confirm('是否撤销?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                stuApplyApi.recallApply(parm).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '撤销成功',
                            type: 'success'
                        })
                        this.getListData()
                    }
                })
            })
        },

        // 跳转申请查看页
        toDetail(row) {
            this.ifShowList = 'view'
            this.id = row.id
        },

        // 跳转申请编辑页
        editDetail(row) {
            this.ifShowList = 'add'
            this.id = row.id
            this.submitType = 'edit'
        },

        // 跳转新增申请页
        addApplication() {
            appListOfIntAcaConApi.getTip().then(resT => {
                if (resT.data.flag === 0) {
                    this.$confirm('你有不合格课程，是否继续申请？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.ifShowList = 'add'
                        this.submitType = 'add'
                    })
                } else if (resT.data.flag === 1) {
                    this.ifShowList = 'add'
                    this.submitType = 'add'
                }
            })
        },

        // 删除报销申请
        delStuApply(val) {
            let _this = this
            let parm = []
            if (val) {
                this.multipleSelection = []
                this.multipleSelection.push({ id: val.id, approveStatus: val.approveStatus })
            }
            if (this.multipleSelection.length === 0) {
                _this.$message.error('请勾选数据')
            } else if (this.multipleSelection.length > 0) {
                for (let i = 0; i < _this.multipleSelection.length; i++) {
                    if (
                        _this.multipleSelection[i].approveStatus !== 0 &&
                        _this.multipleSelection[i].approveStatus !== 3
                    ) {
                        _this.$message.error('只有草稿和驳回状态数据可删除')
                        return false
                    }
                }
                this.multipleSelection.forEach(proId => {
                    parm.push(proId.id)
                })

                this.$delConfirm().then(_ => {
                    stuApplyApi.deleteApply(parm).then(res => {
                        if (res.code === 200) {
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            _this.getListData()
                        }
                    })
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.condition-card ::v-deep {
    .el-row {
        height: 30px !important;
    }
    .el-form-item {
        margin-bottom: 0 !important;
    }
}
.roster-container ::v-deep {
    .el-date-editor--datetimerange.el-input__inner {
        width: 100% !important;
    }
    .el-form {
        padding-right: 15px;
    }
}
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.sub-title {
    margin: 16px 0 65px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
</style>
